/**
 * 联系管理员
 */
import './ContactManage.scss';
import React, { Component } from 'react';
//导入两个插件
import Manager from '../../components/Manager';
import Dialog from '../../components/Dialog'
//引入图片库
import imagesStore from '../../assets/lib/imagesStore'

export default class ContactManage extends Component {
    constructor(props) {
        super(props);
        // 相当于 Vue 的 data 数据源
        this.state = {
            pokemonCount: 0,
            managerInfo: [],
            showState: false,
            pokemonInfo: null
        }
        // 为事件绑定 this 的指向
        this.openDialog = this.openDialog.bind(this);
        this.closeDialog = this.closeDialog.bind(this);
    }

    //生命周期
    componentDidMount() {
        React.axios('/store-manage/gw1901/store_manager_info.php').then(res => {
            this.setState({
                managerInfo: res.data
            });
            console.log(this.state.managerInfo);
            // 根据扫地僧数组的长度设置数量统计状态
            this.setState({
                pokemonCount: this.state.managerInfo.length
            });
        });
    }
    
    /**
     * 开启对话框
     * @param { Object } info 传入的信息对象
     */
    openDialog(info) {
        this.setState({
            pokemonInfo: info,
            showState: true
        });
    }

    /**
     * 关闭对话框
     */
    closeDialog() {
        this.setState({
            showState: false
        });
    }

    //渲染界面
    render() {
        return (
            <div className="container">
                {/* 内容标题 */}
                <div className="title">
                    <img 
                        src={imagesStore.img1} 
                        alt="图片加载中" 
                    />
                    <div className="title-text">
                        <h2>联系扫地僧</h2>
                    </div>
                </div>

                {/* 内容补充 */}
                <div className="PokemonCount">当前共找到 { this.state.pokemonCount }位扫地僧</div>
                <div className="manage">

                     {/* 扫地僧列表 */}
                    <Manager 
                        data={this.state.managerInfo}
                        openDialog={this.openDialog}
                    />
                    
                    {/* 对话框 */}
                    <Dialog 
                        showState={this.state.showState}
                        closeThis={this.closeDialog}
                        dialogContent={this.state.pokemonInfo}
                    />
                </div>
            </div>
        )
    }
}
